<script setup>
import { genFileId } from 'element-plus'
const emit = defineEmits(['update:modelValue'])
const upload = ref(null)

//文件上传
const uploadFile = async (param) => {
  emit('update:modelValue', param.file)
}

//上传前校验
const beforeAvatarUpload = (rawFile) => {
  console.log('%c [ rawFile ]-28', 'font-size:13px; background:pink; color:#bf2c9f;', rawFile)
  if (rawFile.type !== 'text/xml') {
    ElMessage.error('请上传xml文件!')
    return false
  }
  return true
}

//允许覆盖文件
const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}

</script>


<template>
  <div>
    <el-upload ref="upload" class="avatar-uploader" :show-file-list="true" :before-upload="beforeAvatarUpload"
      :http-request="uploadFile" :limit="1" :on-exceed="handleExceed">
      <el-check-tag checked="true" type="success">
        <span>
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon> 点击上传xml文件
        </span>
      </el-check-tag>
    </el-upload>
  </div>
</template>

<style lang="scss" scoped></style>